<template>
  <div>
        <header @click="changeEvent" :name="cartSum"> sum: {{ cartSum }}  {{ attr }} - {{reverseMsg}} -full {{full}} </header>
        <button @click="for5">watch</button>
        <button @click="changeFullname">changeFullname</button>
        <span>{{fullName}}</span>
        <div id="watch-example">
        <p>
            Ask a yes/no question:
            <input v-model="question">
        </p>
        <p>{{ answer }}</p>
        </div>
        <ul>
            <li
            v-for="product in products"
            :key="product.id"
            @[vevent.click]="putoCart"
            >{{ product.name }} ({{ product.count }})
          </li>
        </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import axios from 'axios';
export default {
    data(){
        return {
            question:'',
            answer:'I cannot give you an answer until you ask a question!',
            vevent:{
                'click':null
            },
            first:'first',
            last:'last',
            full:'first & last',
            attr:'attr-value',
            products:[{
                name:'登录鉴权',
                count:12,
                id:1
            },{
                name:'数据库连接',
                count:50,
                id:2
            },{
                name:'专题库集市层',
                count:236,
                id:3
            },{
                name:'专题库应用层',
                count:285,
                id:4
            }]
        }
    },
    computed : {
        ...mapState('cart',[
            'cartSum'
        ]),
        reverseMsg:function(){
            return this.attr.split('').reverse().join('');
        },
        fullName:{
            get:function(){
                return this.first + ' ' + this.last;
            },
            set:function(newValue){
                this.first = ' nv: ' + newValue;
            }
        }
    },
    watch:{
        first:function(){
            console.log(this.first);
            this.full = this.first + this.last;
            return this.first
        },
        last:function(){
            return this.last
        },
        question:function(){
            this.answer = 'Waiting for you to stop typing...'
            this.debouncedGetAnswer()
        }
    },
    created: function () {
        // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
        // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
        // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
        // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
        // 请参考：https://lodash.com/docs#debounce
        this.debouncedGetAnswer = this._.debounce(this.getAnswer, 500)
    },
    methods : {
        ...mapActions('cart',[
            'putoCart'
        ]),
        changeEvent(){
            this.vevent.click = 'click'
        },
        changeFullname:function(){
            this.fullName = "test";
        },
        touchWatch(){
            this.first = new Date();
        },
        for5(){
             // 循环5次数
            this._.times(5,function(i){
                console.log(i);
            });
        },
        getAnswer: function () {
            if (this.question.indexOf('?') === -1) {
                this.answer = 'Questions usually contain a question mark. ;-)'
                return
            }
            this.answer = 'Thinking...'
            var vm = this
            this.$axios.get('http://localhost:8080/lijioc/ztts/getGridVideoList')
                .then(function (response) {
                    console.log(response);
                    vm.answer = response.data.data.length;
                    // vm.answer = this._.capitalize(response.data.answer)
                })
                .catch(function (error) {
                    vm.answer = 'Error! Could not reach the API. ' + error
                })
            this.$axios.get("/api/getService")
                .then(function(res){
                    console.log(res);
                })
        }
    }
}

</script>

<style scoped>
    ul li{
        text-align: left;
        cursor: pointer;
    }
</style>